<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Author" content="fancimage">
<meta name="Description" content="ternlight library">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TernLight - Flow-Diagram Framework</title>
<script type="text/javascript" src="../dist/ternlight-1.0.1.min.js"></script>
<script type="text/javascript" src="myshape.js"></script>
<style>
     .toolitem{
         width:80px;
         height:20px;
         border:1px solid green;
         background:#F89E24;
         font-size: 9pt;
         text-align:center;
         padding-top: 4px;
     }     
</style>
<body>
<h2>TernLight - Flow-Diagram Framework</h2>

<div style="width:200px;height:10px;margin-bottom:8px">
<div id="shape1" class="toolitem" style="float:left">Rectangle</div>

<div id="shape2" class="toolitem" style="float:right">MyShape</div>
</div>
<br>

<input id="resize" type="button" value="resize" onclick="onResize()">

<div>
<canvas id="mycanvas" width="700" height="500"/>
</div>
</body>
<script language="javascript">
   var diagram = null;
   function onload(){
       diagram = new tern.Diagram('mycanvas');
       var rectShape1 = new tern.RectangleShape();
       rectShape1.x = 20;
       rectShape1.y = 20;
       rectShape1.width = 100;
       rectShape1.height = 100;
       diagram.addChild(rectShape1);
       
       var rectShape2 = new tern.RectangleShape();
       rectShape2.x = 220;
       rectShape2.y = 120;
       rectShape2.width = 100;
       rectShape2.height = 100;
       diagram.addChild(rectShape2);

       /*将以上两个Shape对象用连线连接起来*/
       rectShape1.connectors[1].connectTo(rectShape2.connectors[2],'v');

       //init toolboxes
       diagram.toolbox('shape1',null,tern.RectangleShape);
       diagram.toolbox('shape2',null,terntest.MyShape);  //custom	   	  
   }
   
   var w=700,h=500;
   function onResize(){
       w += 400;
       h += 200;
       diagram.resize(w,h);
   }
   
   onload();
</script>
</html>
